<template>
  <el-container>
    <el-header>
      <div class="logo">
        <img src="@/assets/logo.jpg" style="height: 100%;float: left;display: block"/>
        <h3 style="width: 65%;height: 100%;line-height: 60px;padding-left:10px;margin-top:0px; float: left;">
          医院预约挂号系统</h3>
      </div>
      <div class="nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="head">
        <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <el-avatar shape="square" :src="userinfo ? userinfo.picture : ''"></el-avatar>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>

    <el-container>
      <el-aside width="210px">
        <!--:router开启el-menu路由模式. 叶子菜单 index路由路径-->
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            :router="true"
        >
          <el-menu-item index="/Home">
            <i class="el-icon-s-home"></i>
            系统首页
          </el-menu-item>
          <el-submenu v-for="item in leftMenu" :index="item.menuId+''">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :index="child.path">
              <i :class="child.icon"></i>
              {{ child.menuName }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!--视图渲染-->
        <router-view/>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userinfo: null,
      // 左侧菜单
      leftMenu: [],
      title: ''
    }
  },
  created() {
    //获取用户信息
    this.getInfo();
    //获取左侧菜单
    this.leftMenus();
  },
  methods: {
    leftMenus() {
      this.$http.get("/system/menu/leftMenu").then(resp => {
        console.log(resp)
        this.leftMenu = resp.data.data;
      })
    },

    /*右上角菜单栏点击事件*/
    handleCommand(command) {
      if (command === 'info') {
        // 如果当前路径不是 /user/info，才执行导航
        if (this.$route.path !== '/user/info') {
          this.$router.push('/user/info');
        }
      } else if (command === 'logout') {
        // 处理退出系统逻辑
        this.$http.post('/sso/logout').then(res => {
          if (res.data.code === 200) {
            sessionStorage.removeItem("token");
            this.$router.push('/');
            this.$message.success("退出成功");
          }
        });
      }
    },


    getInfo() {
      this.$http.get("/system/user/info").then(resp => {
        if (resp.data.code === 200) {
          this.userinfo = resp.data.data;
        }
      })
    },
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #ffffff;
  color: black;
  line-height: 60px;

}

.el-header > .logo {
  width: 210px;
  height: 100%;
  float: left;
  margin-left: -20px;
}

.el-header > .nav {
  width: 20%;
  height: 100%;
  line-height: 60px;
  float: left;
}

.el-header > .head {
  width: 50%;
  height: 100%;
  float: right;
  text-align: right;
}

span.el-avatar.el-avatar--square {
  margin-top: 10px;
}

.el-breadcrumb {
  line-height: 60px;
}

.el-aside {
  height: 100%;
  background-color: #ffffff;
  color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.el-main {
  background-color: #F8F8FF;
  color: #333;
  border-radius: 5px;
  height: 100%;

}

.el-card__body, .el-main {
  padding: 5px;
}

</style>
